<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>134-css样式隔离</title>
    <style></style>
  </head>

  <body>
    <p>
      <a href="https://mp.weixin.qq.com/s/-AZCw8tA-tA2Rg0_3PFi0w" target="_blank"> 参考文档： 微前端沙箱环境 </a>
    </p>
    <ul>
      <li>
        <p>方式一： elementRef.attachShadow() 方式创建沙箱 Dom</p>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM" target="_blank">
          hadow DOM
        </a>
        <hr />
        <div>
          <h5>父元素</h5>
        </div>
        <div id="app1">
          <style>
            * {
              color: red;
            }
          </style>
          <h5>子元素</h5>
          <p class="title">一行文字</p>
        </div>
      </li>
      <li>
        <p>方式二： 添加选择器前缀</p>
        <hr />
        <div class="box2">
          <div>
            <h5>父元素</h5>
          </div>
          <div id="app2">
            <style>
              h5 {
                color: red;
              }
            </style>
            <h5>子元素</h5>
            <p class="title">一行文字</p>
          </div>
        </div>
      </li>
    </ul>
    <script defer type="module" src="./134-main.js"></script>
  </body>
</html>
